﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link href="../css/quote2.css" rel="stylesheet" type="text/css" />
    <link href="../css/ui.core.css" rel="stylesheet" type="text/css" />
    <link href="../css/ui.slider.css" rel="stylesheet" type="text/css" />
    <link href="../css/ui.theme.css" rel="stylesheet" type="text/css" />
     <style>
        body {font-size:11px;font-family:tahoma;
        }
        input {font-size:11px;}
        .inputTxt { width:50px;border-color:#6B6B6B #B9B9B9 #DDDDDD;
                    border-style:solid;
                    border-width:1px;
                    color:#333333;
                    display:inline;
                    font-size:93%;
                    margin:4px 5px 0;
                    padding:2px 0 2px 2px;
                    }
            .btn {  background-color:#FFFFFF;
                    border-color:#6B6B6B #B9B9B9 #DDDDDD;
                    border-style:solid;
                    border-width:1px;
                    color:#333333;
                    display:inline;
                    margin:4px 5px 0 -1px;
                    padding:2px 4px;
                    text-decoration:none;
                    width:auto;

        }
    .ctrtable td {
    border-right: 1px solid #999999;
     border-bottom: 1px solid #999999;
     padding:2px 10px;
    }
    .ui-slider-horizontal { height:35px;}
.ui-widget-header {
border-top:1px solid #9C9C9C;
}
.ui-slider .ui-slider-handle {
cursor:default;
height:35px;
position:absolute;
width:7px;
z-index:2;

}
.ui-widget-header { top:0;position:absolute;

}
.ui-slider-horizontal .ui-slider-handle {
top:0;
}
.ui-slider .ui-state-focus,.ui-slider .ui-state-hover {
 cursor:w-resize; border:0;
}
.ui-slider .slider-left-handler {
    background:transparent url(../IM/sf_time_left.png) no-repeat scroll 0%; z-index:500;
}
.ui-slider .slider-right-handler {
    background:transparent url(../IM/sf_time_right.png) no-repeat scroll 0%; z-index:500
}
.slider-left-range ,.slider-right-range {
 border-top:1px solid #9c9c9c;opacity: 0.5; filter: alpha(opacity:50); -moz-opacity: 0.5; -khtml-opacity: 0.5; background-color:#ffffff; background-repeat:repeat-x;
display:block;
position:absolute;
height:35px;
top:0;
}
    </style>
    <script> var isDebug = false</script>
    <script src="../lib//jquery.js" type="text/javascript"></script>
    <script src="../lib/migratory-jslib.js" type="text/javascript"></script>
    <!--[if IE]><script type="text/javascript" src="../lib/excanvas.min.js"></script><![endif]-->
    <script src="../js/sys/mstar.common.js" type="text/javascript"></script>
    <script src="../js/sys/DFmt.us.js" type="text/javascript"></script>


    <script src="../js/ui/util.js" type="text/javascript"></script>
    <script src="../js/com/QuoteData.js" type="text/javascript"></script>

    <script src="../lib/mstar.flot.js" type="text/javascript"></script>
    <script src="../lib/ui.core.js" type="text/javascript"></script>
    <script src="../lib/ui.slider.js" type="text/javascript"></script>
    <script src="../lib/webtoolkit.contextmenu.js" type="text/javascript"></script>
    <script>
    var Cookies = {
     set: function(name, value) {
         var argv = arguments;
         var argc = arguments.length;
         var expires = (argc > 2) ? argv[2] : null;
         var path = (argc > 3) ? argv[3] : '/';
         var domain = (argc > 4) ? argv[4] : null;
         var secure = (argc > 5) ? argv[5] : false;
         document.cookie = name + "=" + escape(value) +
       ((expires == null) ? "" : ("; expires=" + expires.toGMTString())) +
       ((path == null) ? "" : ("; path=" + path)) +
       ((domain == null) ? "" : ("; domain=" + domain)) +
       ((secure == true) ? "; secure" : "");
     },
     get: function(name) {
         var arg = name + "=";
         var alen = arg.length;
         var clen = document.cookie.length;
         var i = 0;
         var j = 0;
         while (i < clen) {
             j = i + alen;
             if (document.cookie.substring(i, j) == arg)
                 return Cookies.getCookieVal(j);
             i = document.cookie.indexOf(" ", i) + 1;
             if (i == 0)
                 break;
         }
         return null;
     },

     clear: function(name) {
         if (Cookies.get(name)) {
             var expdate = new Date();
             expdate.setTime(expdate.getTime() - (86400 * 1000 * 1));
             Cookies.set(name, "", expdate);
         }
     },

     getCookieVal: function(offset) {
         var endstr = document.cookie.indexOf(";", offset);
         if (endstr == -1) {
             endstr = document.cookie.length;
         }
         return unescape(document.cookie.substring(offset, endstr));
     }
 };
        var reloginUrl = "http://rtqdev.morningstar.com/opt/demologin.jsp?r=defaultChart.htm";    // when session expired or can't login redirect this page.
        var intradayUrl  = "http://rtqdev.morningstar.com/opt/quote.jsp?"; // get intrayData Url.
        if (Cookies.get("SessionID") == null) {
        window.location.href = reloginUrl;
        }
    </script>
</head>
<body style="overflow: auto; padding: 0; margin: 0">
    <div id="chart" style="position: relative">
    </div>
    <div style="width:100%;">
    <table cellpadding=0 cellspacing=0 class="ctrtable">
    <tr><td>Width:<input type="text" id="w" value="" class="inputTxt"/>
     Height:<input type="text" id ="h" value="" class="inputTxt"/>
     <input type=button onclick="changeSize()" value="change outsize" class="btn"/>
    </td>
    <td>Symbol:<input type="text" id="s" value="" class="inputTxt"/>(such as:XNAS:MSFT)
    <input type=button onclick="changeMainTicker()" value="change main Ticker" class="btn"/>(don't change the chart state)
    </td></tr>
    <tr><td><input type=button onclick="saveChart()" value="save the state of chart" class="btn"/>
    <div id = "configure"></div></td>
    <td>recur state of chart:<input type=button onclick="initChart()" value="redraw chart" class="btn"/></td></tr>
    </table>

    </div>

<script>
var debug = true;  /// it will get data api in dev server.
var culture = "en-US";
var region = "USA";
var mainTicker = "XNYS:IBM";
var sw = 955, sh =356;
var statusConfig = { width: 955, height: 356 };
var ch1 = new RTChartComponent(mainTicker, region, culture );
ch1.setLoginUrl(reloginUrl);
ch1.setIntrayDataUrl(intradayUrl);
ch1.initUIConfig({autoHeight:true});              // user default ui configure.
ch1.Init("chart", "ch1",statusConfig);
function changeSize(){
    var w = document.getElementById("w").value;
    var h = document.getElementById("h").value;
    var ww = parseInt(w);
    var hh = parseInt(h);
    if(!isNaN(ww)&&!isNaN(hh)) {
        if(ch1 != null) {
            sw = ww; 
            sh = hh;
            ch1.changeOutSize(ww,hh);
        }
    }
} 
function changeMainTicker() {
    var ticker = document.getElementById("s").value;
    if(ticker != "") {
        if(ch1 != null) {
            mainTicker = ticker;
            ch1.acceptTicker(ticker);
        }
    }
}
var conf = null;
function saveChart(){
   
    if(ch1 != null) {
        conf  = ch1.saveConfig();
        document.getElementById("configure").innerHTML = "<b>the chart state is saved, you can't click the redraw button recur the chart.</b>";
    }
    
}
function initChart() {
    ch1 = new RTChartComponent(mainTicker, region, culture );
    ch1.setLoginUrl(reloginUrl);
    ch1.setIntrayDataUrl(intradayUrl);
    conf.width = sw;
    conf.height = sh;
    conf  = ch1.Init("chart", "ch1",conf);
}
</script>
</body>
</html>
